<template>
    <div class="scroll-item" @click="onClick">
        <!-- <van-image
            v-if="data.src"
            class="scroll-item-image"
            width="60"
            height="60"
            :src="data.src"
            radius="6"
        ></van-image> -->
        <img
            v-if="data.src"
            :src="data.src"
            class="scroll-item-image"
            :class="index === selectedIndex ? 'selected-border' : ''"
            alt=""
        />
        <div class="scroll-item-label">{{ data.label }}</div>
    </div>
</template>

<script lang="ts" setup>
import { PropType, toRefs } from "vue";
import Utils from "../utils/utils";
import BannerItemModel from "../types/scrollItem";

const props = defineProps({
    data: {
        type: Object as PropType<BannerItemModel>,
    },
    index: {
        type: Number,
    },
    selectedIndex: {
        type: Number,
    },
});
const { data, index, selectedIndex } = toRefs(props);

const emit = defineEmits(["click"]);
const onClick = () => {
    emit("click", index.value);
};
</script>

<style lang="less" scoped>
.scroll-item {
    width: 60px; //设置一个固定宽度，使左右两边不留间距
    display: flex;
    flex-direction: column;
    align-items: center;
    .scroll-item-image {
        border-radius: 10px;
        width: 60px;
        height: 60px;
    }
    .selected-border {
        border: 2px solid #42ffe1;
    }

    .scroll-item-label {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 3px;
        text-align: center;
    }
}
</style>
